<template>
	<div class="ranking-list table-theme" v-if="filiale_id != 2">
		<el-card>
			<div class="ranking-title">{{title}}用户使用排行榜</div>
			<div class="top-menu">
				<div class="menu-left">
					<div class="type-view">
						<div class="client-item" v-for="(item, index) in timeList" @click="timeSelect(item.value,item.label)" :key="index"
						 :class="[time == item.value ? 'client-item-active' : '']">
							{{ item.label }}
						</div>
					</div>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<p class="data-number">数据总数：{{ total }}</p>
			<el-table :data="wList">
				<el-table-column label="排名" align="center" prop="">
					<template slot-scope="scope">
						<el-tag>{{ scope.$index+1 }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="用户ID" align="center" prop="user_id"></el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="头像" align="center" prop="">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.heard_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="使用次数" align="center" prop="num"></el-table-column>
			<!-- 	<el-table-column label="用户标签" align="center" prop="">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.num < 2000" type="info">{{scope.row.user_lable}}</el-tag>
						<el-tag v-if="scope.row.num > 2000 && scope.row.num < 4000">{{scope.row.user_lable}}</el-tag>
						<el-tag v-if="scope.row.num > 4000 && scope.row.num < 6000" type="success">{{scope.row.user_lable}}</el-tag>
						<el-tag v-if="scope.row.num > 6000" type="danger">{{scope.row.user_lable}}</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column label="身份" align="center" prop="">
					<template slot-scope="scope">
						<p>{{ roleText[scope.row.role_type] }}</p>
					</template>
				</el-table-column>
				
				<el-table-column label="店铺ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="店铺名" align="center" prop="store_name"></el-table-column>
				<el-table-column label="业绩员" align="center" prop="service_name"></el-table-column>
				<el-table-column label="招商员" align="center" prop="attract_name"></el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"
				 :page-size="30"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import sonMixin from '@/utils/sonMixin';
	export default {
		components: {
			ImgPopover
		},
		mixins:[sonMixin],
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				title: '全部',
				time: 0,
				timeList: [{
						value: 0,
						label: '全部'
					}, {
						value: 'today',
						label: '本日'
					},
					{
						value: 'yesterday',
						label: '昨日'
					},
					{
						value: 'week',
						label: '本周'
					},
					{
						value: 'lastWeek',
						label: '上周'
					},
					{
						value: 'month',
						label: '本月'
					},
					{
						value: 'lastMonth',
						label: '上个月'
					},
					{
						value: 'year',
						label: '今年'
					},
					{
						value: 'lastYear',
						label: '上一年'
					}
				],
				wList: [],
				total: 0,
				totalData: 0,
				page: 0,
				roleText: ['', '用户', '商户', '分销员', '导购员/二级分销商', '业绩', '招商', '工厂', '仓库', '外部工厂', '商家财务'],
				filiale_id:1
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 30,
					time: this.time == 0 ? '':this.time,
				};
				if (this.admin_type != 1 && !this.is_subsidiary_corporation) {
					data.store_id = localStorage.getItem('store_id')
				}
				if(this.is_subsidiary_corporation){
					data.filiale_id = localStorage.getItem('filiale_id');
				}
				this.$http(this.$ApiList.UserRank, data).then(res => {
					this.wList = res.datas;
					this.total = res.count
				});
			},
			// 刷新
			refreshPage() {
				this.page = 1;
				this.init();
			},
			timeSelect(time, title) {
				this.time = time
				this.title = title
				this.init();
			}
		},
		created() {
			this.init();
			this.filiale_id = localStorage.getItem('filiale_id')
		}
	};
</script>
<style lang="scss" scoped>
	.ranking-list {
		.data-filtering-left {
			display: flex;
		}

		.ranking-title {
			font-size: 26px;
			font-weight: bold;
		}

		.type-view {
			display: flex;
		}

		.type-view .client-item {
			margin-right: 40px;
			line-height: 40px;
			color: rgba(153, 153, 153, 1);
			cursor: pointer;
		}

		.client-item-active {
			color: #333333 !important;
			border-bottom: 4px solid #34a1e0;
		}
	}
</style>
